<template>
  <div class="ticket-create">
    <el-card>
      <template #header>
        <h3>📝 提交软件研发工单</h3>
      </template>

      <el-form ref="formRef" :model="form" label-width="120px">
        <el-form-item label="项目名称">
          <el-input v-model="form.projectName" placeholder="请输入项目名称" />
        </el-form-item>

        <el-form-item label="优先级">
          <el-radio-group v-model="form.priority">
            <el-radio label="low">🟢 低</el-radio>
            <el-radio label="medium">🟡 中</el-radio>
            <el-radio label="high">🔴 高</el-radio>
            <el-radio label="urgent">🚨 紧急</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="项目类型">
          <el-select v-model="form.projectType" placeholder="请选择项目类型">
            <el-option label="Web应用" value="web" />
            <el-option label="移动应用" value="mobile" />
            <el-option label="桌面应用" value="desktop" />
            <el-option label="API接口" value="api" />
            <el-option label="数据分析" value="data" />
          </el-select>
        </el-form-item>

        <el-form-item label="技术栈">
          <el-checkbox-group v-model="form.techStack">
            <el-checkbox label="Vue.js">Vue.js</el-checkbox>
            <el-checkbox label="React">React</el-checkbox>
            <el-checkbox label="Angular">Angular</el-checkbox>
            <el-checkbox label="Node.js">Node.js</el-checkbox>
            <el-checkbox label="Java">Java</el-checkbox>
            <el-checkbox label="Python">Python</el-checkbox>
            <el-checkbox label="PHP">PHP</el-checkbox>
            <el-checkbox label="MySQL">MySQL</el-checkbox>
            <el-checkbox label="MongoDB">MongoDB</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="需求描述">
          <el-input v-model="form.description" type="textarea" :rows="4" placeholder="请详细描述项目需求..." />
        </el-form-item>

        <el-form-item label="功能模块">
          <el-checkbox-group v-model="form.modules">
            <el-checkbox label="user">用户管理</el-checkbox>
            <el-checkbox label="auth">权限认证</el-checkbox>
            <el-checkbox label="payment">支付系统</el-checkbox>
            <el-checkbox label="report">报表统计</el-checkbox>
            <el-checkbox label="message">消息通知</el-checkbox>
            <el-checkbox label="file">文件管理</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="loading">提交工单</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import { ElMessage } from "element-plus"

const formRef = ref()
const loading = ref(false)

const form = reactive({
  projectName: "",
  priority: "medium",
  projectType: "",
  techStack: [],
  description: "",
  modules: []
})

const submitForm = async () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success("工单提交成功！")
    console.log("提交的表单数据:", form)
  }, 1000)
}

const resetForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}
</script>

<style scoped>
.ticket-create { max-width: 800px; margin: 0 auto; }
.el-select { width: 100%; }
</style>